<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/main.css"/>
		<link rel="stylesheet" href="css/classify2.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" href="css/classify.css">
		<title></title>
	</head>
	<body>
		<div class="cetent" style="width: 100%;height: 100%; position: fixed;">
		<div class="head-top">
			<div class="back">
			</div>
			<div class="logo">
				<p class="Woke_On_By"><strong>Woke On By</strong></p>
				<p class="New_York_Style">New York Style</p>
				<p class="Chinese_Food_Take__Out_Restaurant">Chinese Food Take<br>Out Restaurant</p>
			</div>
		</div>
		<div class="bg_7"></div>
		<div class="mui-scrool-wrapper" style="margin-top: 3.4rem;">
			<!--左侧列表-->
			<div style="height: 100%;width: 30%;overflow-y: auto;overflow-x: hidden;float: left;">
				<div class="left-menu" id="left" style="overflow-y: auto;overflow-x: hidden;">
					<ul id="cgy" ></ul>
				</div>
			</div>
			<!--右侧列表-->
			<div style="width: 67%;height: 100%;float: left;overflow-y: auto;overflow-x: hidden;">
				<div class="con" id="menus" >
		 		</div>
		 	</div>
		</div>
			<div class="shopcart-list fold-transition" style="display: block; bottom: 0.0rem; ">

				<div class="list-header" style="background: url(imges/pg_5.png); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
				width: 10.8rem; height: 0.15rem;">
				</div>
					<div class="list-left" style="height: 4rem;width: 62%;overflow-y: auto;overflow-x: hidden;">
						
						<ul >
							
						</ul>
						<!--<ul style="height: 33%;">
							<p style="padding-top: 5%;padding-left: 5px;">1.Roast Pork w.Broccoli     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13.00 </p>
						</ul> -->
					</div>
					<div class="list-right" style="height: 4rem;width: 38%; background-color: #efeff3;">
						<p class="Grand_total">Grand total</p>
						<div  >
						<p class="sumprice_left" >$</p>
						<p class="sumprice" id="totalpriceshow">0.00</p>
						</div>
						<div class="pg_11" id="btnselect"><p  style="text-align: center;padding-top: 8%; color: white;">PAY(&nbsp;<span id="totalcountshow">0</span> ITEMS)</p></div>
						<div class="pg_12" ><p style="text-align: center;padding-top: 8%;color: white;">BACK</p></div>
					</div>				 
			</div>
	<div class="subFly">
			<div class="up"></div>
			<div class="down">
				<a class="close" href="javascript:">
					<img src="imges/close.png" alt="">
				</a>

				<dl class="subName">
					<dt><img class="imgPhoto"  src=""></dt>
					<dd>
						<div style="width:5.5rem;">
							<p>
								<span class="cainame"></span>
								<span class="Notes" style="display: none;"></span>
							
							</p>
						</div>
						<p>
							<span>$</span>
							<span class="pce"></span>
							<span class="pce2" style="display: none;" ></span>
							<span class="ItemId" style="display: none;" ></span>
						</p>
						<p>
							<span>Selected：“</span>
							<span class="choseValue" id="choseValueabc"></span>
							<span>”</span>
						</p>
					</dd>
				</dl>
				<div id="subChose">
				
				</div>
				
				<dl class="subCount" style="display: none;">
					<dt>购买数量</dt>
					<dd class="mydd">
						<div class="btn" style="padding-top:5px;">
							<button class="ms" style="display: inline-block;">
                    <strong></strong>
                    </button>
							<i class="mask_number">0</i>
							<button class="ad">
                    <strong></strong>
                    </button>
							<i class="price">0</i>
						</div>
					</dd>
				</dl>
				<div class="foot" style="background-color: #ef6911;">
					<span >Add to cart</span>
				</div>
			</div>
		</div>	
	</div>
<!--	<script src="js/mui.js"></script>-->
	<script src="js/mui.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/add.js"></script>
	<script type="text/javascript">
			mui.plusReady(function() {
				
				$(".list-left>ul").html("");
				$("#sumprice").text("0");
				$("#totalpriceshow").text("0.00");
				$(".minus").next().text("0");
				$(".minus").hide();
				$(".minus").next().hide();
				$(".shopcart-list").show();
				$(".up1").hide();

			});
			var returnData;
			var str="";
			mui.init();
			mui.plusReady(function() {
			//var StoreId = localStorage.getItem("StoreId");
			var StoreId = 1;
			if(StoreId==null){
				mui.openWindow({
					url: 'login.html'
				});			
			}else{ 
				mui.ajax("http://api.jhjnzx.com/api/Normal/GetData", {
				data: {
					procName: "N_GetStoreMenus",
					args: JSON.stringify({
						StoreId: StoreId //此处应取保存的StoreId
					}),
					//"data":params
				},
				dataType: 'json',
				method: 'get',
				//headers:{'Content-Type':'application/json'},
				success: function(data) {
					//alert(data);
					returnData = JSON.parse(data); 
					var element = document.getElementById("cgy");
					
					for(var i = 0; i < returnData[0]["Categorys"].length; i++) {
						//加载菜单左侧列表
						para = document.createElement("li");
						//para.className = "mui-table-view-cell";
						para.innerHTML = "<span>" + returnData[0]["Categorys"][i]["Category"] + "</span>";
						element.appendChild(para);
						//加载菜单右侧列表
						addRightMenu(i);
					}
					$("#left li:first-child").addClass("active");
					$("#menus div:first-child").css({"display":"block"});
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					//console.log(type);
				}
			});
			}
			})
			
			
			
			document.addEventListener('DOMContentLoaded', function() {
				var html = document.documentElement;
				var windowWidth = html.clientWidth;
				html.style.fontSize = windowWidth / 10.8 + 'px';
			}, false);
			
			function addRightMenu(itemNum){ 
				 str += "<div class='right-con con-active' style='display: none;'><ul>";
				 var strmx=''
				 for (var i = 0; i < returnData[0]["Categorys"][itemNum]["Menus"].length; i++) {
				 		if(returnData[0]["Categorys"][itemNum]["Menus"][i].MenuText != null){
						strmx += "<li class=\"jump\"><div class=\"menu-img\"><img src=\""+returnData[0]["Categorys"][itemNum]["Menus"][i].imgUrl+"\"></div><div class=\"menu-txt\">\
											<h4  class=\"list10\" data-icon=\"10\">" + returnData[0]["Categorys"][itemNum]["Menus"][i].MenuText+"</h4>\
											<h5  class=\"list9\" data-icon=\"10\">" + returnData[0]["Categorys"][itemNum]["Menus"][i].Notes+"</h5>\
											<p class=\"list2\">\
												<b>$</b><b>" + returnData[0]["Categorys"][itemNum]["Menus"][i].MenuPrice +"</b>\
											</p>\
											<div class=\"btn\">\
												<button class=\"minus\"></button>\
												<i>0</i>\
												<button class=\"add\"></button>\
												<i class=\"price\">" +  returnData[0]["Categorys"][itemNum]["Menus"][i].MenuPrice +"</i>\
											</div>\
										</div><span style='display: none;'>"+returnData[0]["Categorys"][itemNum]["Menus"][i].MenuId+"</span></li>";
					}
				 }   
				 str +=strmx+ "</ul></div>";
				 $("#menus").html(str);
			};
			document.getElementById('btnselect').addEventListener('tap', function() {
				var aitems = document.getElementById("totalcountshow").innerText;
				var sumitems = 0 ;
				var lomg = document.getElementsByClassName('food');
				
				if ( aitems == 0 ){
					alert('Choose dishes,please.');
				}else{
					var arr = [];				
				for(var i = 0; i < lomg.length; i++) {
					var arr2 = [];
					arr2.push($(lomg[i]).find('.accountName').text());
					arr2.push($(lomg[i]).find('.taste').text());
					arr2.push($(lomg[i]).find('.li_acount').text());
					arr2.push($(lomg[i]).find('.price').text());
					arr2.push($(lomg[i]).find('.imgsrc').text());
					arr2.push($(lomg[i]).find('.menuId').text());
					arr2.push($(lomg[i]).find('.ItemId').text());
					arr2.push($(lomg[i]).find('.Notess').text());
					
			    	var items =$(lomg[i]).find('.li_acount').text();
			    	var item = parseInt(items);
			    	sumitems = sumitems + item;
					arr.push(arr2);
				}
				localStorage.setItem("sumitem",sumitems)
				var jsonstring = JSON.stringify(arr);
				var total = document.getElementById("totalpriceshow").innerText;
				localStorage.setItem("total",total);
				localStorage.setItem("jsonkey", jsonstring);
				window.location = 'order.html';
			}
				
				
			});

		</script>
	</body>
</html>
